implemented company filtering #195
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| const [selectedLocation, setSelectedLocation] = useState<string | undefined>( | ||
| location?.city, | ||
| ); | ||
| const { data: locations = [] } = api.location.list.useQuery(); |
There was a problem hiding this comment.
I think this is causing the extreme latency which I'm seeing on the preview deployment. I think Tracy has solved this problem though. Spend some time looking through review-section.tsx in the form to see how Tracy implemented a Locations combobox.
This should help with the problems we are facing right now. Once we get that figured out I can review (it is too slow to test right now)
| render={({ field }) => ( | ||
| <FormItem className="col-span-5 lg:col-span-2"> | ||
| <FormControl> | ||
| <Select |
There was a problem hiding this comment.
We will probably need to replace this select with the Combobox mentioned above.
| @@ -51,15 +51,18 @@ export default function ComboBox({ | |||
| const styleVariant = | |||
| variant === "form" | |||
| ? "flex h-16 w-full rounded-md border-[3px] border-cooper-blue-600 bg-white px-3 py-2 text-xl font-normal ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" | |||
| : ""; | |||
| : variant === "filtering" | |||
| ? "w-[340px] h-12 rounded-none border-2 border-l-0 border-t-0 border-[#9A9A9A] text-lg placeholder:opacity-50 focus:ring-0 active:ring-0 lg:rounded-md lg:border-2 py-0" | |||
There was a problem hiding this comment.
Instead of 340px can we use 340/16 ~ 21rem
Also for the border let's use border-[0.75px] to be consistent with the Figma and all the other borders we use throughout the app.
If possible, would you also be able to make it so that the placeholder text is the same color as the border?
| @@ -94,13 +106,16 @@ export default function SearchFilter({ | |||
| <Form {...form}> | |||
| <form | |||
| onSubmit={form.handleSubmit(onSubmit)} | |||
| className={cn("w-[100vw]", searchClassName)} | |||
| className={cn("w-[90vw]", searchClassName)} | |||
There was a problem hiding this comment.
Right now the Clear button doesn't align with the right hand side of the screen like it does with the figma
One solution I found (which also preserves the old styles) is
<form
onSubmit={form.handleSubmit(onSubmit)}
className={cn(
"w-[98vw] border border-blue-700",
searchType === "COMPANIES" && "w-full",
searchClassName,
)}
>
Let me know if the w-[98vw] still gives you that weird issue we encountered where the width of the companies page is too much
| @@ -19,7 +19,7 @@ export function SimpleSearchBar() { | |||
| const newLocal = | |||
| "h-12 border border-l-0 border-cooper-blue-800 text-lg text-cooper-blue-600 placeholder:text-cooper-blue-600 rounded-r-lg rounded-l-none"; | |||
| return ( | |||
| <div className="flex w-full rounded-lg"> | |||
| <div className="flex w-full rounded-lg w-full"> | |||
There was a problem hiding this comment.
looks like there are two w-full here so we can remove the second
| )} | ||
| /> | ||
| <Button | ||
| className="bg-white hover:bg-white hover:text-[#9A9A9A] border-white text-black" |
There was a problem hiding this comment.
Here we can make the text color here the same as the border color you used above to match the figma
Description
Added a filter bar to the companies page so that users can filter based on industry and location. Also fixed a bug with the width of the company page being greater than 100%.
Motivation and Context
Helps users narrow down what companies they are looking at.
Closes #190
How has this been tested?
Pressed the filter buttons and they worked.
Screenshots (if appropriate):
Types of changes
pnpm db:generateand verified generated SQL migration files inpackages/db/drizzleChecklist: